require(['config'],()=>{
    require(['jquery','swiper','artTemplate','includes'],($,Swiper,template)=>{
        class indexPage{
            constructor(){
                this.initSwiper()
                this.loadPartsProducts()
                this.loadPhoneProducts()
            }
            //渲染轮播图
            initSwiper(){
                $.ajax({
                    url:'json/swiper.json',
                    method:'GET',
                    dataType:'json',
                    success:resData=>{
                        //console.log("成功",resData);
                        const {data}=resData
                        const html=template('slide-template',{slides:data})
                        $('.banner-container').html(html)
                        new Swiper('.swiper-container',{
                            loop:true,
                            autoplay:{
                                autoplay:true,
                                disableOnInteraction:false
                            },
                            pagination:{
                                el:'.swiper-pagination',
                                clickable:true,
                                bulletElement:'li'
                            },
                        })
                    }
                })

            }
            //渲染手机商品
            loadPhoneProducts(){
                $.ajax({
                    url:'json/phone.json',
                    method:'GET',
                    dataType:'json',
                    success:resData=>{
                        const {data}=resData
                        const html=template('phone-items',{phones:data})
                        $('.phone-section .section-container ul').html(html)
                    }
                })
            }
            //渲染配件商品
            loadPartsProducts(){
                $.ajax({
                    url:'json/products.json',
                    method:'GET',
                    dataType:'json',
                    success:resData=>{
                        const {data}=resData
                        const html=template('product-items',{products:data})
                        $('.parts-section .section-container ul').html(html)
                    }
                })
            }
            
        }
        new indexPage()
    })
})
// const ul = document.querySelector('.banner-container')
// const lis = document.querySelectorAll('.banner-container li')
// const moveWidth = parseFloat(css(lis[0], 'width')) //css函数为tools.js种封装的获取外部样式的函数
// const navItems = document.querySelectorAll('.banner-pagination li')
// let _left = parseFloat(css(ul, 'left'))
// let index = 0
// //底部按钮样式跟随函数
// function moveIndex(list1, list2, index) {
//     for (let i = 0; i < list1.length; i++) {
//         if (list1[i].className == 'active') {
//             list1[i].className = ''
//         }
//     }
//     list1[index].className = 'active'
//     for (let i = 0; i < list2.length; i++) {
//         if (list2[i].className == 'active') {
//             list2[i].className = ''
//         }
//     }
//     list2[index].className = 'active'
// }

// function change() {
//     index += 1
//     if (index === lis.length) {
//         index = 0
//     }
//     _left = -index * moveWidth

//     moveIndex(navItems, lis, index)
//     animate(ul, {
//         left: _left
//     }, 300)
//     headerChange(index) //tools.js中封装的animate函数
// }
// //自动播放函数
// let timer = null

// function autoPlay() {
//     timer = setInterval(change, 6000)
// }
// autoPlay()
// /* document.querySelector('.banner').addEventListener('mouseenter',function(e){
//     //clearInterval(timer)
// },false)
// document.querySelector('.banner').addEventListener('mouseleave',function(e){
//     //timer = setInterval(change, 6000)
// },false) */
// document.querySelector('.banner .banner-pagination').addEventListener('click', function (e) {
//     if (e.target.nodeName === 'LI') {
//         index = Array.from(navItems).findIndex(function (curr) {
//             return curr === e.target
//         })
//         index = index - 1
//         change()
//     }
// }, false)
// /* ********logo样式变化******* */
// function headerChange(i) {

//     if (lis[i].classList.contains('active') && lis[i].dataset.theme === 'white') {
//         $('header .header-main .logo a svg').setAttribute('fill', '#fff')
//         document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//             items.classList.add('font-white')
//         })
//         $('header .header-main .user .user-img').id = 'user-img-white'
//         $('header .header-main .cart').id = 'cart-white'
//     }
//     if (lis[i].classList.contains('active') && lis[i].dataset.theme === 'blue') {
//         $('header .header-main .logo a svg').setAttribute('fill', '#008cff')
//         document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//             items.classList.remove('font-white')
//         })
//         $('header .header-main .user .user-img').id = 'user-img-gray'
//         $('header .header-main .cart').id = 'cart-gray'
//     }
// }
// let flag = 1
// /* **********顶部下拉列表************* */
// document.querySelector('header .header-main nav ul').addEventListener('mouseover', e => {
//     if (e.target.parentNode.className === 'drop') {
//         $('header .drop-down').classList.add('drop-down-show')
//         $('header').classList.add('toggle')
//         $('.header-cover').classList.add('header-cover-show')
//         document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//             items.classList.remove('font-white')
//         })
//         $('header .header-main .user .user-img').id = 'user-img-gray'
//         $('header .header-main .cart').id = 'cart-gray'
//         /* $('header .header-main .user .user-img').style.backgroundImage='url(./img/user-gray.png)'
//         $('header .header-main .cart').style.backgroundImage='url(./img/cart-gray.png)' */
//     } else if (e.target.parentNode.className === 'no-drop') {
//         $('header .drop-down').classList.remove('drop-down-show')
//         $('header .drop-down').classList.remove('drop-down-appDownLoad-show')
//         $('.header-cover').classList.remove('header-cover-show')
//         $('header').classList.remove('toggle')
//         $('header .drop-down .app-download').classList.remove('app-download-show')
//         document.querySelectorAll('.banner .banner-container li').forEach(items => {
//             if (items.classList.contains('active') && items.dataset.theme === 'white') {
//                 document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//                     items.classList.add('font-white')
//                 })
//                 $('header .header-main .user .user-img').id = 'user-img-white'
//                 $('header .header-main .cart').id = 'cart-white'
//                 /* $('header .header-main .user .user-img').style.backgroundImage='url(./img/user-white.png)'
//                 $('header .header-main .cart').style.backgroundImage='url(./img/cart-white.png)' */
//             }
//         })
//     } else if (e.target.parentNode.className === 'appDownLoad-drop') {
//         $('header .drop-down').classList.add('drop-down-appDownLoad-show')
//         $('header').classList.add('toggle')
//         $('.header-cover').classList.add('header-cover-show')
//         document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//             items.classList.remove('font-white')
//         })
//         $('header .header-main .user .user-img').id = 'user-img-gray'
//         $('header .header-main .cart').id = 'cart-gray'
//         $('header .drop-down .app-download').classList.add('app-download-show')
//         for (let j = 0; j < drops.length; j++) {
//             dropDowns[j].classList.remove('drop-down-main-show')
//         }
//         flag = 0
//         /* $('header .header-main .user .user-img').style.backgroundImage='url(./img/user-gray.png)'
//         $('header .header-main .cart').style.backgroundImage='url(./img/cart-gray.png)' */
//     }
// }, false)

// const drops = document.querySelectorAll('header .header-main nav ul .drop')
// const dropDowns = document.querySelectorAll('header .drop-down .drop-down-main')
// for (let i = 0; i < drops.length; i++) {
//     drops[i].onmouseover = function () {
//         for (let j = 0; j < drops.length; j++) {
//             dropDowns[j].classList.remove('drop-down-main-show')
//         }
//         flag = 1
//         dropDowns[i].classList.add('drop-down-main-show')
//     }
// }
// document.querySelector('header .drop-down').addEventListener('mouseover', e => {
//     if (flag == 0) {
//         $('header .drop-down .app-download').classList.add('app-download-show')
//         $('header .drop-down').classList.add('drop-down-appDownLoad-show')
//     } else {
//         $('header .drop-down').classList.add('drop-down-show')
//         //$('header .drop-down .drop-down-main').classList.add('drop-down-main-show')
//     }
//     document.querySelectorAll('header .drop-down .drop-down-main ul').forEach(items => {
//         items.className = 'ul-on'
//     })
//     $('header').classList.add('toggle')
//     $('.header-cover').classList.add('header-cover-show')
//     document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//         items.classList.remove('font-white')
//     })
//     $('header .header-main .user .user-img').id = 'user-img-gray'
//     $('header .header-main .cart').id = 'cart-gray'
// }, false)

// document.querySelector('header .drop-down').addEventListener('mouseout', e => {
//     $('header .drop-down').classList.remove('drop-down-show')
//     $('header .drop-down').classList.remove('drop-down-appDownLoad-show')
//     $('.header-cover').classList.remove('header-cover-show')
//     $('header').classList.remove('toggle')
//     $('header .drop-down .app-download').classList.remove('app-download-show')
//     document.querySelectorAll('header .drop-down .drop-down-main ul').forEach(items => {
//         items.className = ''
//     })
//     document.querySelectorAll('.banner .banner-container li').forEach(items => {
//         if (items.classList.contains('active') && items.dataset.theme === 'white') {
//             document.querySelectorAll('header .header-main nav ul li a').forEach(items => {
//                 items.classList.add('font-white')
//             })
//             $('header .header-main .user .user-img').id = 'user-img-white'
//             $('header .header-main .cart').id = 'cart-white'
//             // $('header .header-main .user .user-img').style.backgroundImage='url(./img/user-white.png)'
//             // $('header .header-main .cart').style.backgroundImage='url(./img/cart-white.png)'
//         }
//     })
// }, false)


// $('header .header-main .user').addEventListener('mouseover', () => {
//     $('header .header-main .user .user-drop-down').style.display = 'block'
// }, false)
// $('header .header-main .user').addEventListener('mouseleave', () => {
//     $('header .header-main .user .user-drop-down').style.display = 'none'
// }, false)
// /********  轮播图 **********/